<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-container,#app,body,html {
            height: 100%;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="params.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="params.phone" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="users" tooltip-effect="dark" style="width: 100%">
                <el-table-column
                        prop="uname"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="addr"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="addr"
                        label="操作">
                    <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" circle @click.prevent="del( scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination background layout="prev,pager,next"
                      :total="total" @current-change="query" page-size="5">
            </el-pagination>
        </el-main>
    </el-container>

</div>


<script>
    var v = new Vue({
        el:"#app",
        data:{
            params:{ name:'',phone:''},
            users : [],
            page:1,
            total:0
        },
        created(){
            this.query();
        },
        methods:{
            query(page){
                page = page || 1;
                let url ="QueryUser.s?size=5&page="+page;
                if(this.params.name){
                    url+="&name="+this.params.name
                }
                // if(this.params.phone){
                //     url+="&phone="+this.params.phone
                // }
                axios.get(url).then(res=>{
                    this.users = res.data.list;
                    this.total = res.data.total;
                })
            },
            del(index,id){
                if(confirm("请确认是否要删除用户？")){
                    axios.get("Del.s?id="+id)
                        .then(res=>{
                            alert(res.data.msg);
                            if(res.data.code==1){
                                //将被删除的用户从数组中过滤出去
                                this.users=this.list.filter(
                                    users=>{return users.id!=id}
                                );
                            }
                        })
                }
            },
        }

    })
</script>

</body>
</html>